<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="加载数据">
<h1>商品列表</h1>
<table>
    <tr>
        <th>商品名</th>
        <th>库存</th>
        <th>价格</th>
    </tr>
</table>
<script src="../jq.js"></script>
<script>
    $("input").click(function () {
        //模拟从服务请求到的数据
        let arr = [{title:"小米手机" ,num:1000,price:5000},
            {title:"小米手机" ,num:1000,price:5000},
            {title:"小米手机" ,num:1000,price:5000}]
        //把数据显示到页面中
        for (let i = 0; i < arr.length; i++) {
            let  item = arr[i];//遍历出商品对象
            //创建tr和td
            let tr = $("<tr></tr>")
            let titletd = $("<td></td>")
            let numtd = $("<td></td>")
            let pricetd = $("<td></td>")
            titletd.text(item.title)
            numtd.text(item.num)
            pricetd.text(item.price)

            tr.append(titletd)
            tr.append(numtd)
            tr.append(pricetd)
            $("table").append(tr)
        }
    })
</script>
</body>
</html>